<!-- 兑换商品分类 -->
<template>
  <div class="exchange-category">
    <div class="exchange-category__header">
      <el-radio-group v-model="exchangeType" @change="exchangeTypeChange">
        <el-radio-button :label="1">消费兑换商城</el-radio-button>
        <el-radio-button :label="0">商家兑换商城</el-radio-button>
      </el-radio-group>
    </div>

    <el-form :inline="true" :model="formInline" @keyup.enter.native="search()">
      <el-form-item label="名称分类">
        <el-input v-model="formInline.goodsTypeName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="分类状态">
        <el-select v-model="formInline.isDisplay">
          <el-option label="全部" value=""></el-option>
          <el-option label="上线" :value="1"></el-option>
          <el-option label="下线" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">重置</el-button>
        <el-button type="success" @click="addNew()" size="mini" icon="el-icon-edit">新增</el-button>
        <!-- <el-button
          :loading="exportLoading"
          type="success"
          @click="exportFile()"
          size="mini"
          icon="el-icon-edit"
          >导出</el-button
        > -->
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" width="100%" height="600px" :data="tableData"
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }" border>
      <el-table-column label="序号" align="center" prop="sortNo"></el-table-column>
      <el-table-column label="名称分类" prop="goodsTypeName" align="center"></el-table-column>
      <el-table-column label="分类状态" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isDisplay" :active-value="1" :inactive-value="0"
            @change="updateCategoryStatus(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="200" align="center"></el-table-column>
      <!-- <el-table-column
        label="更新时间"
        prop="updateTime"
        width="200"
        align="center"
      ></el-table-column> -->
      <el-table-column label="操作" align="center" fixed="right" width="150">
        <template slot-scope="scope">
          <!-- v-if="scope.row.isDisplay != 1" -->
          <el-button size="mini" @click="addNew(scope.row)" type="text">编辑</el-button>
          <el-button size="mini" @click="del(scope.row)" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top:2px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :current-page="listQuery.current" :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <CategoryDialog :show.sync="show" :detail="curDetail" :exchangeType="exchangeType" @refresh="search" />
  </div>
</template>

<script>
import {
  queryGoodsExchangeTypeList,
  editGoodsExchangeType,
  deleteGoodsExchangeType,
} from '@/api/goodsExchange';
import CategoryDialog from './components/CategoryDialog.vue';
export default {
  components: {
    CategoryDialog,
  },
  data() {
    return {
      exchangeType: 1,
      formInline: {
        goodsTypeName: '',
        isDisplay: '',
      },
      tableData: [],
      loading: false,
      listQuery: {
        current: 1,
        size: 10,
      },
      total: 0,
      show: false,
      curDetail: {},
      exportLoading: false
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      this.listQuery.current = 1;
      this.getList();
    },
    exchangeTypeChange() {
      this.kong();
      this.search();
    },
    kong() {
      this.formInline = this.$options.data().formInline;
    },
    getList() {
      this.loading = true;
      const data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline,
          exchangeType: this.exchangeType,
        },
        ascs: [],
        descs: [],
      };
      queryGoodsExchangeTypeList(data)
        .then((res) => {
          this.loading = false;
          this.tableData = res.records;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    updateCategoryStatus(curItem) {
      curItem.isDisplay = curItem.isDisplay == 1 ? 0 : 1;
      this.$confirm(
        `确定${curItem.isDisplay == 1 ? '下架' : '上架'}该分类吗?`,
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '提交中...';
              editGoodsExchangeType({
                goodsTypeId: curItem.goodsTypeId,
                sortNo: curItem.sortNo,
                goodsTypeName: curItem.goodsTypeName,
                exchangeType: curItem.exchangeType,
                isDirectedExchange: '1',
                isDisplay: curItem.isDisplay == 1 ? 0 : 1
              }).then((res) => {
                if (res.code == 1) {
                  this.$message.success(res.message);
                  this.getList();
                } else {
                  this.$message.error(res.message);
                }
                instance.confirmButtonLoading = false;
                done();
              })
            } else {
              done();
            }
          }
        }
      )
    },
    addNew(curItem) {
      this.curDetail = curItem;
      this.show = true;
    },
    del(curItem) {
      this.$confirm('确定删除该分类吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteGoodsExchangeType({ goodsTypeId: curItem.goodsTypeId }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.message);
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.exchange-category {
  &__header {
    margin-bottom: 20px;
  }
}
</style>
